<template>
  <div>
      <UpdateAddAlert :obj="AddAlert" :getChapters="getChapters" :alert="alert"></UpdateAddAlert>
      <UpdateEditAlert :obj="EditAlert" :getChapters="getChapters" :alert="alert"></UpdateEditAlert>
      <el-col v-loading="loading" :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
        <el-form-item label="书籍名称">
            <el-select v-model="filters.bid" filterable size="small" placeholder="请选择" @change="searchChange">
                <el-option v-for="(item,index) in searchBook" :key="index" :label="item.bName" :value="item.bid"></el-option>
            </el-select>
        </el-form-item>
				<el-form-item label="章节">
					<el-input v-model="filters.chapter" size="small" placeholder="搜索章节"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="handleAdd">新增</el-button>
				</el-form-item>
			</el-form>
		</el-col>
    <div class="table-box">
      <el-table
        :data="tableData"
        :border="true"
        size="small"
        :fit="true"
        :highlight-current-row="true"
        @select-all="selectAllFn"
        @select="selectClick"
        @selection-change="selectionChange"
        :height="tableHeight"
        v-loading="listLoading"
        style="width: 100%">
        <el-table-column type="selection" width="40" fixed="left"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50" fixed="left"></el-table-column>
        <el-table-column prop="bName" align="center" label="书名" width="120" sortable></el-table-column>
        <el-table-column prop="title" align="center" label="章节名" :show-overflow-tooltip="true" min-width="100"></el-table-column>
        <el-table-column prop="chapters" align="center" label="章节" :show-overflow-tooltip="true" min-width="50" sortable></el-table-column>
        <el-table-column prop="src" align="center" label="章节路径" :show-overflow-tooltip="true" min-width="100"></el-table-column>
        <el-table-column prop="updateTime" align="center" label="更新时间" :show-overflow-tooltip="true" min-width="150" sortable></el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.$index,scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="remove(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block pagination" v-show="tableData.length>0">
        <div class="pagination-left">
          <el-button type="danger" size="small" v-show="selectAll" @click="removeAll">批量删除</el-button>
        </div>
        <el-pagination
          @current-change="currentChange"
          @size-change="sizeChange"
          :current-page="1"
          :page-sizes="[10,20,50,100]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import config from '../config.js'
import {getTimes} from '../assets/js/com.js'
import UpdateAddAlert from './UpdateAddAlert.vue'
import UpdateEditAlert from './UpdateEditAlert.vue'
import api from '../api'
  export default{
    mounted(){
        //获取列表
        this.getBookSelect();
        //获取所以章节
        this.getChapters();
        //窗口自适应
        this.rewindow();
    },
    components:{
      UpdateAddAlert,
      UpdateEditAlert
    },
    methods:{
      //获取书籍列表
      getBookSelect(){
          api.$http("/system/getSelectBooks",{},function(err,res){
            //console.log(res.data);
            if(res.data.code==1){
                this.searchBook=res.data.info;
                this.searchBook.unshift({bid:0,bName:"全部"});
                this.filters.bid=this.searchBook[0].bid;
                this.loading=false;
            }else{
              this.alert(res.data.msg);
            }
          }.bind(this));
      },
      //获取所有章节
      getChapters(){
        this.listLoading=true;
        let obj={
          bid:this.filters.bid,
          chapter:this.filters.chapter,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
        api.$http('/system/getChapters',obj,function(err,res){
          //console.log(res);
          if(!res.data){
            this.listLoading=false;
            this.tableData=[];
            this.total=0;
          }else{
            if(res.data.info.length==0){
              this.listLoading=false;
              this.tableData=[];
              this.total=0;
            }else{
                for(let val in res.data.info){
                  res.data.info[val].bName=res.data.bArr[val].bName;
                  res.data.info[val].desc=res.data.fsDesc[val];
                  res.data.info[val].bAuth=res.data.bArr[val].bAuth;
                  res.data.info[val].cid=res.data.bArr[val].cid;
                  res.data.info[val].updateTime=getTimes(res.data.info[val].updateTime);
                }
                this.total=res.data.count.emitted.fulfill[0]||0;
                this.tableData=res.data.info;
                this.listLoading=false;
            }
          }
        }.bind(this),function(err){
          console.log(res);
        })
      },
      //下拉改变
      searchChange(id){
        if(id==0){
          this.filters.bName=""
        }else{
          let obj=this.searchBook.find((item)=>{
            return item.bid==id;
          })
          this.filters.bName=obj.bName;
        }
        this.getChapters();
      },
      //搜索
      getUsers(){
          this.getChapters();
      },
      //新增
      handleAdd(){
        this.AddAlert.bid=this.filters.bid;
        this.AddAlert.date=new Date();
        this.AddAlert.isShow=true;
      },
      //编辑
      edit(index,row){
          this.EditAlert.desc=row.desc;
          this.EditAlert.buid=row.buid;
          this.EditAlert.title=row.title;
          this.EditAlert.bid=row.bid;
          this.EditAlert.date=new Date(row.updateTime);
          this.EditAlert.isShow=true;
      },
      //删除
      remove(index,row){
          this.$confirm('是否删除该章节?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.listLoading=true;
            api.$http("/system/removeChapter",row,function(err,res){
              if(res.data.code==1){
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.listLoading=false;
                this.getChapters();
              }
            }.bind(this));
          }).catch(() => {
                   
          });
      },
      //批量删除
      removeAll(){
          var tath=this; 
          this.$confirm('是否批量删除这些文件?', '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            tath.listLoading=true;
            (function bl(i){
              i++;
              if(i==tath.selection.length){
                  tath.$message({
                    type: 'success',
                    message: '批量删除成功!'
                  });
                  tath.listLoading=false;
                  tath.getChapters();
                  return;
              }else{
                  api.$http("/system/removeChapter",tath.selection[i],function(err,res){
                    if(res.data.code==1){
                        console.log(res.data.msg);
                        bl(i);
                    }else{
                      tath.$message({
                        type: 'warning',
                        message: '数据库操作出错'
                      });
                    }
                  });
              }
            })(-1);            
          }).catch(() => {
                return false;
          });
      },
      //窗口自动适应
      rewindow(){
        let wh=window.innerHeight;
        this.tableHeight=wh-190;
        let tath=this;
        window.onresize=function(){
          let wh=window.innerHeight;
          tath.tableHeight=wh-190;
        }
      },
      //全选
      selectAllFn(selection){
        this.selectionLength=selection.length;
        if(selection.length>0){
          this.selectAll=true;
        }else{
          this.selectAll=false;
        }
        this.selection=selection;
      },
      selectClick(selection,row){
        this.selection=selection;
      },
      //选择改变
      currentChange(currentPage){
          this.currentPage=currentPage;
          this.getChapters();
      },
      //分页大小
      sizeChange(size){
        this.pageSize=size;
        this.currentPage=1;
        this.getChapters();
      },
      //选中改变
      selectionChange(selection){
        this.selectionLength=selection.length;
        if(selection.length>0){
          this.selectAll=true;
        }else{
          this.selectAll=false;
        }
        this.selection=selection;
      },
      //提示函数
      alert(txt){
        this.$alert(txt, '提示', {
          confirmButtonText: '确定',
          callback: action => {
            return true;
          }
        });
      },
      console(txt,type){
        this.$message({
          message: txt,
          type:type||'success'
        });
      }
    },
    data(){
      return {
        tableHeight:300,  //表格高度
        listLoading:false, //加载中
        loading:true,     //加载中
        searchBook:[],    //搜索的书籍列表
        selection:[],    //被选中的数组
        selectAll:false,  //全选状态
        selectionLength:0, //选中的数量
        tableData:[],     //表格数据
        currentPage:1,   //当前页
        pageSize:10,     //当前页行数
        total:1,         //总行数
        filters:{        //搜索条件
          bid:0,
          bName:"",
          chapter:""
        },
        AddAlert:{      //新增弹出的
          title:"新增章节",
          isShow:false,
          bid:1000000001,
          date:new Date(),
          desc:""
        },
        EditAlert:{   //修改弹出的
          title1:"编辑章节",
          isShow:false,
          bid:0,
          title:"",
          date:new Date(),
          desc:"",
          buid:""
        }
      }
    }
  }
</script>
